<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<title>Chart 2D: dynamics</title>
		<style type="text/css">
			@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
			@import "../../../../dijit/themes/claro/claro.css";
			.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
			.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
		</style>
		<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: false, async: true"></script>
		<script type="text/javascript">
			require([
				"dojo/parser",
				"dijit/registry",
				"dojox/lang/functional/sequence",
				"dojox/charting/Chart",
				"dojox/charting/themes/CubanShirts",
				"dojox/charting/widget/Legend",
				"dojox/charting/axis2d/Log",
				"dojox/charting/plot2d/Grid",
				// Used indirectly/by parser
				"dijit/form/Button",
				"dijit/form/CheckBox",
				"dijit/form/ComboBox",
				"dojox/charting/axis2d/Default",
				"dojox/charting/plot2d/Columns",
				"dojox/charting/plot2d/ClusteredColumns",
				"dojox/charting/plot2d/StackedColumns",
				"dojox/charting/plot2d/Areas",
				"dojox/charting/plot2d/StackedAreas",
				"dojo/domReady!"
			], function(parser, registry, dlfs, Chart, CubanShirts, Legend, LogAxis, GridPlot){
				parser.parse();
			
				var chart, legend, size = 10, magnitude = 30;
				
				var getData = function(){
					var data = new Array(size);
					for(var i = 0; i < size; ++i){
						data[i] = Math.random() * magnitude;
					}
					return data;
				};
				
				var getZeroes = function(){
					return dlfs.repeat(size, "-> 0", 0);
				};
				
				var makeObjects = function(){
					chart = new Chart("test");
					chart.setTheme(CubanShirts);
				
					if(registry.byId("hAxis").get("checked")){
						chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
					}
				
					if(registry.byId("vAxis").get("checked")){
						chart.addAxis("y", {vertical: true, type: LogAxis});
					}
				
					chart.addPlot("default", {type: registry.byId("plot").get("value"), gap: 2});
				
					if(registry.byId("grid").get("checked")){
						chart.addPlot("grid", {type: GridPlot, hMinorLines: true, vMinorLines: true});
					}
				
					for(var i = 1; i <= 5; ++i){
						if(registry.byId("s" + i).get("checked")){
							chart.addSeries("Series " + i, getData(), {stroke: {color: "black", width: 1}});
						}
					}
					if(registry.byId("s6").get("checked")){
						chart.addSeries("Series 6", getZeroes(), {stroke: {color: "black", width: 1}});
					}
				
					chart.render();
				
					legend = new Legend({chart: chart}, "legend");
				};
				
				dojo.addOnLoad(makeObjects);
				
				changePlot = function(){
					var type = registry.byId("plot").get("value");
					chart.addPlot("default", {type: type, gap: 2});
					chart.render();
					legend.refresh();
				};
				
				changeGrid = function(){
					if(registry.byId("grid").get("checked")){
						chart.addPlot("grid", {type: GridPlot, hMinorLines: true, vMinorLines: true});
					}else{
						chart.removePlot("grid");
					}
					chart.render();
				};
				
				changeX = function(){
					if(registry.byId("hAxis").get("checked")){
						chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
					}else{
						chart.removeAxis("x");
					}
					chart.render();
				};
				
				changeY = function(){
					if(registry.byId("vAxis").get("checked")){
						chart.addAxis("y", {vertical: true, type: LogAxis});
					}else{
						chart.removeAxis("y");
					}
					chart.render();
				};
				
				changeSeries = function(n){
					if(n == 6){
						// special case
						if(registry.byId("s6").get("checked")){
							chart.addSeries("Series 6", getZeroes(), {stroke: {color: "black", width: 1}});
						}else{
							chart.removeSeries("Series 6");
						}
					}else{
						if(registry.byId("s" + n).get("checked")){
							chart.addSeries("Series " + n, getData(), {stroke: {color: "black", width: 1}});
							registry.byId("sb" + n).get("disabled", false);
						}else{
							chart.removeSeries("Series " + n);
							registry.byId("sb" + n).get("disabled", true);
						}
					}
					chart.render();
					legend.refresh();
				};
				
				addSeries = function(n){
					chart.addSeries("Series " + n, getData(), {stroke: {color: "black", width: 1}});
					chart.render();
					legend.refresh();
				};
			});
		</script>
	</head>
	<body class="claro">
		<h1>Chart 2D: dynamics</h1>
		<button id="reset1" type="reset" data-dojo-type="dijit/form/Button">Reset with no onClick handler should reset</button>
		<table>
			<tr>
				<td>Plot:</td>
				<td>
					<select data-dojo-type="dijit/form/ComboBox" id="plot" onChange="changePlot()">
						<option value="Columns">Columns</option>
						<option value="ClusteredColumns">ClusteredColumns</option>
						<option value="StackedColumns">StackedColumns</option>
						<option value="Areas">Areas</option>
						<option value="StackedAreas">StackedAreas</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Grid:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="grid" onChange="changeGrid()">
					<label for="grid">include</label>
				</td>
			</tr>
			<tr>
				<td>X axis:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="hAxis" onChange="changeX()">
					<label for="hAxis">include</label>
				</td>
			</tr>
			<tr>
				<td>Y axis:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="vAxis" onChange="changeY()">
					<label for="vAxis">include</label>
				</td>
			</tr>
			<tr>
				<td>Series 1:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s1" onChange="changeSeries(1)">
					<label for="s1">include</label>
					&nbsp;
					<button data-dojo-type="dijit/form/Button" id="sb1" onClick="addSeries(1)">Randomize</button>
				</td>
			</tr>
			<tr>
				<td>Series 2:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s2" onChange="changeSeries(2)">
					<label for="s2">include</label>
					&nbsp;
					<button data-dojo-type="dijit/form/Button" id="sb2" onClick="addSeries(2)">Randomize</button>
				</td>
			</tr>
			<tr>
				<td>Series 3:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s3" onChange="changeSeries(3)">
					<label for="s3">include</label>
					&nbsp;
					<button data-dojo-type="dijit/form/Button" id="sb3" onClick="addSeries(3)">Randomize</button>
				</td>
			</tr>
			<tr>
				<td>Series 4:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s4" onChange="changeSeries(4)">
					<label for="s4">include</label>
					&nbsp;
					<button data-dojo-type="dijit/form/Button" id="sb4" onClick="addSeries(4)">Randomize</button>
				</td>
			</tr>
			<tr>
				<td>Series 5:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s5" onChange="changeSeries(5)">
					<label for="s5">include</label>
					&nbsp;
					<button data-dojo-type="dijit/form/Button" id="sb5" onClick="addSeries(5)">Randomize</button>
				</td>
			</tr>
			<tr>
				<td>Series 6:</td>
				<td>
					<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="false" id="s6" onChange="changeSeries(6)">
					<label for="s6">include</label>
					&nbsp;this series contains all 0 values
				</td>
			</tr>
		</table>
		<div id="test" style="width: 600px; height: 400px;"></div>
		<div id="legend"></div>
	</body>
</html>

